﻿@section head{
    <style>
        .layui-card-body .layui-form-item {
            margin-bottom: 0px;
        }

        .layui-inline button {
            margin-right: 5px;
        }

        .layui-form-item .layui-input-inline {
            width: 200px;
            margin-right: 5px;
        }

        .layui-form-item .layui-inline {
            margin-right: 0;
        }

        /*shaobo自定义*/
        .layui-table-click {
            color: #1b8fe6 !important;
            background-color: #ffffff;
        }

        @@media screen and (max-width:768px) {
            .layui-form-item .layui-input-inline {
                width: auto;
                margin-left: 5px;
            }

            .layui-inline button {
                margin-top: 5px;
            }
        }
    </style>
}
@section body {
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="tab1" lay-filter="title"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="filter-form" id="form1">
                        <div class="layui-form-item">
                            <div class="layui-form-item layui-inline">
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="userName" name="userName" placeholder="用户" class="layui-input">
                                        <input type="text" id="Remark" name="Remark" placeholder="备注" class="layui-hide">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button type="button" class="pear-btn pear-btn-md pear-btn-primary" data-type="reload" id="btnSearch">
                                        <i class="layui-icon layui-icon-search"></i>
                                        查询
                                    </button>
                                    @if (ViewBag.CoreTitleUserNew)
                                    {
                                        <button type="button" class="pear-btn pear-btn-md pear-btn-primary" data-type="addUser">添加用户</button>
                                    }

                                    @if (ViewBag.CoreTitleUserDelete)
                                    {
                                        <button type="button" class="pear-btn pear-btn-md pear-btn-danger" data-type="deleteUser">移除用户</button>
                                    }
                                    <button type="reset" class="pear-btn pear-btn-md">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="switchTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" disabled name="Enabled" value="{{d.Users.Gender}}" lay-skin="switch" lay-text="男|女" lay-filter="sexDemo" {{ d.Users.Gender == '男' ? 'checked' : '' }}>
    </script>

    <script type="text/html" id="checkboxTpl">
        <!-- 这里的 checked 的状态只是演示 -->
        <input type="checkbox" name="lock" disabled value="{{d.Users.Enabled}}" title="可用" lay-filter="lockDemo" {{ d.Users.Enabled == true ? 'checked' : '' }}>
    </script>
}
@section script {
    <script>

    var $;
        layui.use(['table', 'view', 'common'], function () {
        var table = layui.table
            , view = layui.view;
        $ = layui.$
        let common = layui.common;

        var checkRow;
        //渲染表格1
        table.render({
            elem: '#tab1'
         , url: 'GetTitleListJSON'//数据接口
         , autoSort: false//禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
         , height: 'full-70' //高度最大化减去差值
         , method: "post"
         , cols: [[
           { type: 'numbers' },
           { field: 'Name', width: 0, title: '职称名称', event: 'setSign' }
         ]]
          , limit: 1000
          , where: { __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
          , done: function (res, curr, count) {
              //选择第一行
              $("[data-index='0']").click();
              $("[data-index='0']").addClass('layui-table-click');
          }
        });
        //监听tab1行单击事件
        table.on('row(title)', function (obj) {

            checkRow = obj.data.ID//记录选中的ID
            var demoReload = $('#userName');//条件
            //方法级渲染
            table.render({
                elem: '#test-table-reload'
             , url: 'GetTitleUserJSON'//数据接口
             , toolbar: false //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
             , defaultToolbar: ['filter']  //工具栏名称对象['filter', 'print', 'exports']
             , autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增
                , page: true//开启分页
                , limit: 10
                , limits: [10, 20, 50, 100]
             , method: "post"
             , height: 'full-125' //高度最大化减去差值
             , even: false   //若不开启隔行背景，不设置该参数即可true/false
             , where: {
                 key: demoReload.val(),
                 titleID: checkRow,
                 __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
             }
             , cols: [[
                 { type: 'numbers' }
               , { checkbox: true}
                 , { templet: '<div>{{d.Users.Name}}</div>',field: 'Users.Name', width: 100, title: '用户名' }
                 , { templet: '<div>{{d.Users.ChineseName}}</div>', field: 'Users.ChineseName', width: 100, title: '中文名'}
                 , { field: 'Users.Enabled', width: 120, title: '状态', templet: '#checkboxTpl' }
                 , { field: 'Users.Gender', title: '性别', width: 100, templet: '#switchTpl' }
                 , { templet: '<div>{{d.Users.Email}}</div>', field: 'Users.Email', width: 180, title: 'Email'}
                 , { templet: '<div>{{d.Users.Remark}}</div>', field: 'Users.Remark', width: 0, title: '备注'}//width:0代表占据所有列宽
             ]]
          , done: function (res, curr, count) {
          }
            });
            //调用表格2重载
            //active['reload'].call();
        });

        $('.layui-inline .pear-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        var active = {
            reload: function () {
                var demoReload = $('#userName');
                //执行重载
                table.reload('test-table-reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                  , where: {
                      key: demoReload.val(),
                      titleID: checkRow,
                      __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value
                  }
                });
            },
            addUser: function () {
                top.layer.open({
                    type: 2,
                    resize: false,
                    title: ['职称添加用户', 'font-size:14px;'],
                    content: '/Admin/TitleUserNew?titleID=' + checkRow,
                    area: common.isModile() ? ['95%', '95%'] : ['1000px', '500px'],
                });
            },
            deleteUser: function () {
                var checkStatus = table.checkStatus('test-table-reload')
                    , data = checkStatus.data; //获取选中的数据

                //遍历ID，放到数组中
                var UserIDs = new Array();
                for (var i = 0; i < data.length; i++) {
                    UserIDs[i] = data[i].Users.ID
                }

                if (data.length === 0) {
                    layer.msg('请选择一行');
                } else {
                    //请求登入接口
                    view.req({
                        url: 'DeleteTitleUserId' //实际使用请改成服务端真实接口
                        , data: { deletedUserIDs: UserIDs, titleID: checkRow, __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                        , type: "post"
                        , dataType: "json"
                        , done: function (res) {
                            if (res.codeIndex == 1) {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                });
                                btnSearchClick();//刷新
                            } else {
                                layer.msg(res.msg, {
                                    offset: 't',
                                    anim: 6
                                });
                            }

                        }
                    });
                }
            },
        };

    });
        document.onkeydown = function (e) {
            if (!e) e = window.event;
            if ((e.keyCode || e.which) == 13) {
                // 查找你要判断的文本框
                var myInput = document.getElementById('userName');
                if (myInput == document.activeElement) {
                    //获得焦点后查询
                    btnSearchClick();
                }

            }
        }
        //查询事件
        function btnSearchClick() {
            document.getElementById("btnSearch").click();
        }
    </script>
}